
import {useState, useEffect} from 'react'
import '@/style/home.scss'
function Home() {
  useEffect(() => {
    playVideo();
  }, []);
  const playVideo = () => { // 自动播放视频失效时调用函数
    window.addEventListener('load', function () {
      let target = document.querySelector(".homeBanner")
      let bannerVideo = document.querySelector("#bannerVideo")
      target.addEventListener('touchstart', function () {
        if (bannerVideo.paused) {
          bannerVideo.play();
        }
      })
    }, false)
  }
  const businessData = [
		{
      icon: require('@/images/industry/SMC加工件.jpg'),
      content: '加工件'
		},
		{
      icon: require('@/images/industry/SMC模压件 (1).jpg'),
			content: 'SMC/DMC模压制品'
		},
		{
      icon: require('@/images/industry/PC板加工件.jpg'),
      content: '型材'
		},
    {
      icon: require('@/images/industry/树脂板加工件.jpg'),
      content: '模塑件'
		},

	]
  return (
    <>
      <div className="homeBanner">
        <video
          id="bannerVideo"
          src="files/banner.mp4"
          className="bannerVideo"
          muted="muted"
          preload="Metadata"
          loop
          autoPlay
          x5-video-player-type='h5'
          x5-playsinline="true"
          playsinline="true"
          poster="files/firstBanner.jpg"
          webkit-playsinline="true"
        ></video>
      </div>
      <div className="visionBox">
        <div className="mainContent">
          <div className="visionContent flexSpaceBetween">

            <div className="visionImg">
            </div>
            <div className="visionLeft">
              <ul>
                <li>
                  <span>企业目标</span>
                  <p>丰源电力科技（涿州）有限公司始终以“发展绝缘材料产业，打造质量可靠产品”为企业目标，依靠先进的工艺、过硬的质量、优质的服务赢得客户的信赖，并成为多个领域企业集团的合格供应商。</p>
                </li>
                <li>
                  <span>企业愿景</span>
                  <p>我们的愿景是成为五金行业的领先者，通过不断创新和卓越品质，为客户提供最优质的解决方案，促进行业的可持续发展，共创美好未来。</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className="businessBox">
        <p className="boxTitle">主营品类</p>
        <div className="mainContent flexSpaceBetween">
          {businessData.map((item, index) => {
						return (
              <div className="businessItem">
                <img src={item.icon}></img>
                <p>{item.content}</p>
              </div>
						)
					})}
        </div>
      </div>

      
    </>
	)
}
 
export default Home